/**
 * SearchBox：查询组件
 * @type {Object}
 */
import React  from 'react'
import style from './index.less'

import moment from 'moment'

import { Form, Select, Input, Button, DatePicker,message } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const { MonthPicker } = DatePicker;

const config={
	timeSlot:['月','季','年'],
	month:['01','02','03','04','05','06','07','08','09','10','11','12'],
	quarter:[
		{
			name:'一',
			value:'01',
		},
		{
			name:'二',
			value:'04',
		},
		{
			name:'三',
			value:'07',
		},
		{
			name:'四',
			value:'10',
		},
	],
	year:['2014','2015','2016','2017','2018'],
}




/**
 * 获取最后一天
 * @param  {[type]} begin [开始时间]
 * @param  {[type]} diffMonth [相差月份]
 * @return {[type]}       [返回最后一天]
 */
const getLastDate=(begin,diffMonth)=>{
	return moment(begin,'YYYYMMDD').add(diffMonth, 'months').subtract(1, 'days').format('YYYYMMDD')
}

const SearchForm= (props) =>{
	const {
		portId,
		//产品列表
		portList,
		timeSlot='0',
		quarter,
		//开始时间
		beginDate,
		//结束时间
		endDate,
		//情景ID
		sceneId,
		//情景列表
		sceneList,
		fundStyle,
		benchId,
		setState,
		searchSence,
		searchReport,
	} = props

	const diff=moment(endDate,'YYYYMMDD').diff(moment(beginDate,'YYYYMMDD'),'month')

	const year = beginDate.substr(0,4)
	const month = beginDate.substr(4,2)

	let portName=''

	if(portId&&portId!=''&&portList&&portList.length){
		const port = portList.find(item=>item.key===portId)
		portName= port&&port.label
	}



	


	const handleSubmit = (e) => {

		if(!portId||portId==''){
			message.error('请选择产品！')
		}else{
			if(sceneList&&sceneList.length&&sceneId=='0'){
				message.error('请选择情景！')
			}else if(!fundStyle){
				message.error('没有报表！')
			}else{
				setState({
				showReport:true,
			});
			searchReport({
				portId,
				beginDate,
				endDate,
				sceneId,
				fundStyle,
				benchId,
			})
			}
		}
	}
	const handleGroupChange= (value) => {
		console.log('handleGroupChange',value)
		// console.log(111,value,portList,portId)
		if(portId!=undefined&&portId!=''&&portList&&portList.length){
			const port=portList.find((item,i)=>item.key===portId)
			console.log(portList,portId,port)
			portName=port&&port.label
		}
		if(value){
			const portId=portList.find(item=>item.label===value).key
			setState({
				portId,
				sceneId:'0',
				sceneList:[],
				fundStyle:'',
				benchId:'',
				showReport:false,
				pdtName:value
			});
			searchSence({
				portId,
				beginDate,
				endDate,
			})
		}else{
			setState({
				portId:'',
				sceneId:'0',
				sceneList:[],
				fundStyle:'',
				benchId:'',
				showReport:false,
			});
		}
		
	}
	const handleTimeSlotChange= (value) => {
		let begin,end
		switch(value){
			case '0':
			  begin = year+'0101'
				end = year+'0131'
				break;
			case '1':
				begin = year+'0101'
				end = year+'0331'
				break;
			case '2':
				begin=year+'0101'
				end=year+'1231'
				break;
		}
		setState({
			timeSlot:value,
			quarter:value==='1'?'0':null,
			beginDate:begin,
			endDate:end,
			sceneId:'0',
			sceneList:[],
				fundStyle:'',
				benchId:'',
			showReport:false,
		});
		searchSence({
			portId,
			beginDate:begin,
			endDate:end,
		})

	}
	const handleChangeYear = (value) =>{
		const begin = value+beginDate.substr(4,7)
		const end = value+endDate.substr(4,7)
		setState({
			beginDate:begin,
			endDate:end,
			sceneId:'0',
			sceneList:[],
				fundStyle:'',
				benchId:'',
			showReport:false,
		});
		searchSence({
			portId,
			beginDate:begin,
			endDate:end,
		})
	}
	const handleChangeMonth = (value) =>{
		const begin=beginDate.substr(0,4)+value+'01'
		const end=getLastDate(begin,1)
		setState({
			beginDate:begin,
			endDate:end,
			sceneId:'0',
			sceneList:[],
				fundStyle:'',
				benchId:'',
			showReport:false,
		});
		searchSence({
			portId,
			beginDate:begin,
			endDate:end,
		})
	}
	const handleChangeQuarter = (value) =>{
		let begin,end
		switch(value){
			case '0':
				begin=year+'0101'
				end=year+'0331'
				break;
			case '1':
				begin=year+'0401'
				end=year+'0630'
				break;
			case '2':
				begin=year+'0701'
				end=year+'0930'
				break;
			case '3':
				begin=year+'1001'
				end=year+'1231'
				break;
		}
		setState({
			quarter:value,
			beginDate:begin,
			endDate:end,
			sceneId:'0',
			sceneList:[],
				fundStyle:'',
				benchId:'',
			showReport:false,
		});
		searchSence({
			portId,
			beginDate:begin,
			endDate:end,
		})
	}
	const handleSceneChange = (value) => {
		setState({
			sceneId:value,
			showReport:false,
		})
		// searchReport({
		// 	portId,
		// 	beginDate,
		// 	endDate,
		// 	sceneId:value,
		// })
	}
	return (
		<div className={style.searchForm}>
			<Form layout="inline"
				// onSubmit={handleSubmit}
				>
				<FormItem label="产品：">
					<Select
						defaultValue={portName}
						value={portName}
						onChange={handleGroupChange}
						mode="combobox"
						style={{width:320}}
						allowClear={true}
						// labelInValue={true}
						>
						{
							 portList&&portList.length&&portList.map((item,i)=><Option value={item.label} key={i}>{item.label}</Option>)||null
						}
					</Select>
				</FormItem>
				<FormItem	label="评估维度：">
					<Select
						defaultValue={`${config.timeSlot[timeSlot]}度`}
						onChange={handleTimeSlotChange}
						style={{width:100}}
					>
						{
							config.timeSlot.map((item,i)=><Option value={String(i)} key={i}>{item}度</Option>)
						}
					</Select>
				</FormItem>
				<FormItem>
					<Select
						defaultValue={`${year}年`}
						onChange={handleChangeYear}
						style={{width:100}}
					>
						{
							config.year.map((item,i)=><Option value={item} key={i}>{item}年</Option>)
						}
					</Select>
				</FormItem>
				{
					timeSlot==='0'?(
						<FormItem>
							<Select
								defaultValue={`${month}月`}
								// value={`${month}月`}
								onChange={handleChangeMonth}
								style={{width:100}}
							>
								{
									config.month.map((item,i)=><Option value={item} key={i}>{item}月</Option>)
								}
							</Select>
						</FormItem>
					):false
				}
				{
					timeSlot==='1'?(
						<FormItem>
							<Select
								defaultValue={quarter&&`第${config.quarter[quarter].name}季度`}
								onChange={handleChangeQuarter}
								style={{width:100}}
							>
								{
									config.quarter.map((item,i)=><Option value={String(i)} key={i}>第{item.name}季度</Option>)
								}
							</Select>
						</FormItem>
					):false
				}
				{
					sceneList&&sceneList.length?(
						<FormItem label="情景名称：">
							<Select
								defaultValue={sceneId!='0'&&sceneList&&sceneList.length&&(sceneList.find(item=>item.key===sceneId).label)||''}
								value={sceneId!='0'&&sceneList&&sceneList.length&&(sceneList.find(item=>item.key===sceneId).label)||''}
								onChange={handleSceneChange}
								style={{width:100}}
							>
								{
									sceneList&&sceneList.length&&sceneList.map((item,i)=><Option value={item.key} key={i}>{item.label}</Option>)
								}
							</Select>
						</FormItem>
					):null
				}
				
				<FormItem>
					<Button type="primary" htmlType="submit" onClick={handleSubmit}>
						查询
					</Button>
				</FormItem>
			</Form>
		</div>
	)
}


const SearchFormBox = Form.create()(SearchForm);

export default SearchFormBox
